<template>
	<div class="personnelAdd">
		<div class="header_ContentBox pl_10 pr_10">
			<i class="lhadmin lhadmin-renzheng Icon"></i>
			<span class="pl_10 pr_10">/</span>
			<span class="header_text">供应商 / 新增供应商</span>
		</div>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">基本信息</h4>
			</div>
			<div class="pt_10">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>供应商类型</div>
					<div class="fl list-cont">
						<el-select v-model="formData.type">
							<el-option label="个人" value="2"></el-option>
							<el-option label="公司" value="1"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>供应商名称</div>
					<div class="fl list-cont">
						<el-input v-model="formData.name" :disabled="disabled"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>供应商负责人</div>
					<div class="fl list-cont">
						<el-input v-model="formData.principal"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>负责人手机号</div>
					<div class="fl list-cont">
						<el-input v-model="formData.principal_mobile"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">所属代理商</div>
					<div class="fl list-cont">
						<el-select v-model="formData.agent_id">
							<el-option
								:label="item.name"
								:value="item.id"
								v-for="(item, index) in agentList"
								:key="index"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>所属城市</div>
					<div class="fl list-cont">
						<!-- <el-input v-model="formData.principal_mobile"></el-input> -->
						<el-select v-model="city_id" placeholder="请选择">
							<el-option v-for="item in cityList" :key="item.id" :label="item.city_name" :value="`${item.id}`">
							</el-option>
						</el-select>
					</div>
				</div>
				<!-- 城市
				<el-form-item label="所在城市" :required="true">
					<el-select v-model="city_arr" placeholder="请选择" @change="changeBtndialog">
						<el-option
							v-for="item in cityList"
							:key="item.id"
							:label="item.city_name"
							:value="`${item.id}|${item.city_name}|${item.city_sn}`"
						>
						</el-option>
					</el-select>
				</el-form-item> -->
				<!-- <div class="row-info clear">
					<div class="fl title-key">公司名称</div>
					<div class="fl list-cont">
						<el-input v-model="formData.company_name"></el-input>
					</div>
				</div> -->
				<div class="row-info clear">
					<div class="fl title-key">注册电话</div>
					<div class="fl list-cont">
						<el-input v-model="formData.company_mobile"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">公司地址</div>
					<div class="fl list-cont">
						<el-input v-model="formData.company_address"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">公司营业执照编码</div>
					<div class="fl list-cont">
						<el-input v-model="formData.registration_no"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">公司规模</div>
					<div class="fl list-cont">
						<el-select v-model="formData.company_size">
							<el-option label="10-99人" value="1"></el-option>
							<el-option label="100-499人" value="2"></el-option>
							<el-option label="500-999人" value="3"></el-option>
							<el-option label="1000-9999人" value="4"></el-option>
							<el-option label="10000人以上" value="5"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>创建人</div>
					<div class="fl list-cont">
						<el-input v-model="formData.bd_name"></el-input>
					</div>
				</div>
			</div>
			<div class="ml_110 mt_80">
				<span class="resetBtn mr_10" @click="back">返回</span>
				<span class="btnOK" @click="submitBtn">保存</span>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { addSupplier, supplierInfo, editSupplier } from '@/api/supplier.js'
import { searchAgentList } from '@/api/agent.js'

export default {
	name: 'supplierAdd',
	data() {
		return {
			url: common.url,
			disabled: false,
			cityList: [], //城市列表
			//表单数据
			formData: {
				type: '',
				name: '',
				principal: '',
				principal_mobile: '',
				agent_id: '',
				company_name: '',
				company_mobile: '',
				company_address: '',
				registration_no: '',
				company_size: '',
				bd_name: ''
			},
			city_id: '',
			agentList: []
		}
	},
	created() {
		// this.$route.query.sn
		if (this.$route.query.sn) {
			this.disabled = true
			this.getInfo(this.$route.query.sn)
		}
		this.getcityList()
	},
	mounted() {
		this.getList() //代理商列表
	},
	methods: {
		async submitBtn() {
			try {
				if (
					this.formData.type == '' ||
					this.formData.name == '' ||
					this.formData.principal == '' ||
					this.formData.principal_mobile == '' ||
					this.formData.bd_name == ''
				) {
					this.$message.error('请输入必填项！')
					return
				}

				let query = this.formData

				if (this.$route.query.sn) {
					let ret = await editSupplier({
						sn: this.$route.query.sn,
						...query,
						city_id: this.city_id
					})
				} else {
					let ret = await addSupplier({ ...query, city_id: this.city_id })
				}
				this.$message.success(this.$route.query.sn ? '编辑成功！' : '新增成功！')
				this.back()
			} catch (err) {
				console.log(err)
			}
		},
		async getInfo(sn) {
			try {
				let ret = await supplierInfo({
					sn: sn
				})

				for (const key in this.formData) {
					this.formData[key] = '' + ret[key]
					this.formData['agent_id'] = +ret['agent_id']
					this.city_id = '' + ret['city_id']
				}
			} catch (err) {
				// console.log(err)
			}
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		getcityList() {
			//获取城市列表
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		async getList() {
			try {
				let ret = await searchAgentList({ status: 1 })
				this.agentList = ret.list.map(it => {
					return {
						id: it.id,
						name: it.name,
						value: it.name,
						city_list: it.city_list
					}
				})
			} catch (err) {
				console.log(err)
			}
		}
	}
}
</script>

<style scoped>
.personnelAdd {
	margin: 15px 15px 0 15px;
}
.row-info {
	padding: 10px 0;
}
.resetBtn,
.btnOK {
	padding: 0 30px;
}
.title-key {
	width: 100px;
}
.list-cont img {
	width: 128px;
}

.r-90 {
	transform: rotate(-90deg);
}
.r180 {
	transform: rotate(180deg);
}
.r90 {
	transform: rotate(90deg);
}
.avatar {
	position: relative;
	top: -80px;
	left: 50px;
	width: 100px !important;
}
.dingwei {
	font-size: 26px;
	color: var(--btn);
}
</style>



// WEBPACK FOOTER //
// src/components/supplier/SupplierAdd.vue